<template>
  <div>
    <Breadcrumb :style="{margin: '20px 0'}">
      <BreadcrumbItem>参数设置</BreadcrumbItem>
      <BreadcrumbItem>参数</BreadcrumbItem>
    </Breadcrumb>
    <Layout>
      <Sider class="sider" hide-trigger>
        <div class="menu">
          <template v-for="(val,index) in menu">
            <div :key="index" :class="{activeMenuItem:val.active,menuItem:true}" @click="activeContent(index)">
              <Icon type="ios-paper"/>
              {{ val.title }}
            </div>
          </template>
        </div>
      </Sider>
      <Content class="content">
        <div v-show="itemActive.port">
          <span style="margin-right:15px">端口区间:</span>
          <Input v-model="port.start" placeholder="名称" style="width: 300px"/>
          <span style="color:red">~</span>
          <Input v-model="port.end" placeholder="名称" style="width: 300px"/>
          <Button @click="savePort">保存</Button>
        </div>
      </Content>
    </Layout>
  </div>
</template>

<script>
import model from '../util/model'
export default {
  name: 'Setting',
  data: function () {
    return {
      menu: [
        {
          name: 'port',
          title: '端口设置',
          active: false
        }
      ],
      itemActive: {
        port: false
      },
      port: {
        start: 5556,
        end: 5656
      }
    }
  },
  watch : {
    "itemActive.port" : function(value){
      if(value){
        this.getPortInfo()
      }
    }
  },
  methods: {
    init : function () {
      let that = this
      // db.find({}, function (err, cet) {
      //   console.log(that)
      //   console.log(err)
      //   console.log(cet)
      //   that.dataList = cet
      // })
    },
    getPortInfo : function () {
      let that = this
      let portInfo = model.port.find({},function(err,cet){
        console.log(cet)
        // that.port = cet[0]
      })
    },
    activeContent: function (index) {
      this.menu.forEach((val, i) => {
        this.menu[i].active = false
        if (index === i) {
          this.menu[index].active = true
          this.itemActive[this.menu[index].name] = true
        }
      })
    },

    //保存端口数据
    savePort: function () {
      model.port.remove({}, { multi: true }, function (err, numRemoved) {
      });
      let that = this
      model.port.insert({
        start: that.port.start,
        end: that.port.end,
      }, (err, ret) => {
        if (!err) {
          that.$Message.info('保存成功')
        }
      })
    }
  }

}
</script>

<style scoped>
.sider {
  margin-right: 30px;
  background: #fff;
}

.menuItem {
  margin-bottom: 10px;
  padding: 15px;
}

.activeMenuItem {
  font-weight: bold;
  background-color: #515a6e;
  color: #fff;

}

.content {
  background-color: #fff;
  padding: 30px;
  border: 1px solid #ddd;
}
</style>
